import React, { useState, useEffect, useRef } from "react";
import axios from "../service/index";
import { Button, Table, Tag, Pagination } from "antd"; // Pagination 分页
import EditAdd from "./EditAdd";
import '../css/user.css'

export default function User() {
  let [userList, setUserList] = useState([]);
  let [page, setPage] = useState(1);
  let [total, setTotal] = useState(0); // 总记录数
  let [visible, setVisible] = useState(false); // 对话框是否显示
  let [title, setTitle] = useState(''); // 标题：编辑 、添加
  let dia = useRef() // 表示子组件

  const getList = (page=1) => { // 默认为1
    axios.get("/api/users?page=" + page).then((res) => {
      // console.log(res);
      if (res.errNo === 0) {
        setUserList(res.paginate.data);
        setPage(res.paginate.current_page);
        setTotal(res.paginate.total);
      }
    });
  };

  useEffect(() => {
    getList();
  }, []);

  const edit = (record)=>{
    console.log(record);// 点击编辑的当前行的所有信息
    setTitleVisible('编辑用户'); // 调用setTitleVisible 方法，显示对话框
    dia.current.setUser({...record}) // 父组件调用子组件的方法给子组件传值
  }

  const setTitleVisible = (title="")=>{ // 标题默认是""
    setTitle(title)
    setVisible(!visible)
  }

  const addHandle = ()=>{
    setTitleVisible('添加用户');
  }
  // table 表格
  const columns = [
    {
      title: "序号",
      dataIndex: "id",
    },
    {
      title: "用户名",
      dataIndex: "username",
    },
    {
      title: "手机号",
      dataIndex: "mobile",
    },
    {
      title: "邮箱",
      dataIndex: "email",
    },
    {
      title: "性别",
      dataIndex: "gender",
      render(value) {
        if (value === "1") {
          return <Tag color="red">男</Tag>;
        } else if (value === "2") {
          return <Tag color="green">女</Tag>;
        } else {
          return <Tag color="red">保密</Tag>;
        }
      },
    },
    {
      title: "状态",
      dataIndex: "status",
      render(value) {
        if (value === "1") {
          return <Tag color="green">启用</Tag>;
        } else if (value === "2") {
          return <Tag color="red">禁用</Tag>;
        }
      },
    },
    {
      title: "操作",
      render(text, record) {
        return (
          <>
            <Button type="primary" onClick={()=>edit(record)}>编辑</Button>&nbsp;&nbsp;
            <Button type="primary">删除</Button>
          </>
        );
      },
    },
  ];

  return (
    <div>
      <div className="addTop">
        <h2>用户列表</h2>
        <Button className="addBtn" type="primary" onClick={addHandle}>添加</Button>
      </div>
      
      {/* pagination={false} false 不自带分页 */}
      <Table
      className="table"
        dataSource={userList}
        columns={columns}
        rowKey={(item) => item.id}
        pagination={{  // 自带分页
          defaultCurrent: page,
          total: total,
          onChange: getList,
        }}
      />
      {/* // 分页 */}
      {/* <Pagination defaultCurrent={page} total={total} onChange={getList} /> */}

      <EditAdd ref={dia} title={title} visible={visible} setTitleVisible={setTitleVisible} getList={getList} page={page} />
    </div>
  );
}
